<template>
	<!-- 选择支付方式 -->
	<view>
		<uni-popup ref="popup" type="bottom">
			<view class="yh-bgf yh-br-t-lr32 yh-pb30">
				<view class="yh-lh88 yh-tc yh-fz36 yh-fw600 yh-mt10">
					支付方式
				</view>
				<view @click="payType = 'wx'" class="level_align flex_between yh-ptb0lr30 yh-h88">
					<view class="level_align">
						<image src="../static/icon/zhifu3@3x.png" class="yh-img44 yh-mr20" mode=""></image>
						微信支付
					</view>
					<view>
						<uni-icons v-if="payType === 'wx'" type="circle-filled" size="26" color="#FC3B26"></uni-icons>
						<uni-icons v-else type="circle" size="26" color="#CCCCCC"></uni-icons>
					</view>
				</view>
				<!-- #ifdef APP-PLUS -->
				<view  @click="payType = 'zfb'" class="level_align flex_between yh-ptb0lr30 yh-h88">
					<view class="level_align">
						<image src="../static/icon/zhifu2@3x.png" class="yh-img44 yh-mr20" mode=""></image>
						支付宝支付
					</view>
					<view>
						<uni-icons v-if="payType === 'zfb'" type="circle-filled" size="26" color="#FC3B26"></uni-icons>
						<uni-icons v-else type="circle" size="26" color="#CCCCCC"></uni-icons>
					</view>
				</view>
				<!-- #endif -->
				<!-- #ifdef APP-PLUS -->
				<view  @click="payType = 'yhk'" class="level_align flex_between yh-ptb0lr30 yh-h88">
					<view class="level_align">
						<image src="../static/icon/zhifu1@3x.png" class="yh-img44 yh-mr20" mode=""></image>
						银行卡支付
					</view>
					<view class="flex flex_center">
						<text @click="bindBank" style="line-height: 56rpx;margin-right: 20rpx;">{{ bankMessage.id ? '已绑定' : '去绑定' }}</text>
						<uni-icons v-if="payType === 'yhk'" type="circle-filled" size="26" color="#FC3B26"></uni-icons>
						<uni-icons v-else type="circle" size="26" color="#CCCCCC"></uni-icons>
					</view>
				</view>
				<!-- #endif -->
				<view  @click="payType = 'ye'" class="level_align flex_between yh-ptb0lr30 yh-h88">
					<view class="level_align">
						<image src="../static/icon/yue_zhifu@3x.png" class="yh-img44 yh-mr20" mode=""></image>
						余额支付
					</view>
					<view>
						<uni-icons v-if="payType === 'ye'" type="circle-filled" size="26" color="#FC3B26"></uni-icons>
						<uni-icons v-else type="circle" size="26" color="#CCCCCC"></uni-icons>
					</view>
				</view>
				<view class="level_align yh-ptb0lr30 yh-mt30" @click="isRead = !isRead">
					<image v-if="!isRead" src="../static/icon/yudu2@3x.png" class="yh-img40 yh-mr20" mode=""></image>
					<image v-else src="../static/icon/yudu@3x.png" class="yh-img40 yh-mr20" mode=""></image>
					请阅读<text class="yh-fc-orange" @click.stop="pageJumps('/pages/other/richText1?title=平台规则协议&id=5')">《平台规则协议》</text><text class="yh-fc-orange" @click.stop="pageJumps('/pages/other/richText1?title=购买协议&id=6')">《购买须知》</text>
				</view>

				<view class="yh-ptb0lr30 yh-mt60">
					<tui-button @click="confirm" height="90rpx" :size="28" type="danger" shape="circle">确定</tui-button>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="popup1" type="center" :maskClick="false">
			<view class="yh-bgf yh-w590 yh-br20">
				<view class=" level_align flex_between">
					<view class="yh-w88"></view>
					<view class="yh-tc yh-fw600 yh-fz32 yh-lh88">
						支付确认
					</view>
					<view class="yh-w88">
						<uni-icons @click="closePop" type="close" size="28" color="#666"></uni-icons>
					</view>
				</view>
				<view class="yh-pd30">
					<view class="flex align_baseline yh-mt60 flex_center">
						￥<text class="yh-fz48 yh-red">{{ totalMoney }}</text>
					</view>
					<view class="yh-tc yh-mt10">
						支付金额
					</view>
					<view class="pay_code" v-if="payType == 'yhk'">
						<input type="number" maxlength="6" v-model="code" placeholder="请输入验证码" />
						<text @click="getCode">{{ codeTxt }}</text>
					</view>
					<view class="yh-mt60 center_combo">
						<tui-button @click="confirm2" :loading="loading" :disabled="loading" width="520rpx" height="90rpx" :size="28" type="danger" shape="circle">确定</tui-button>
					</view>
					
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import { mapGetters } from 'vuex'
	export default {
		name: "selectPay",
		props: {
			totalMoney: {
				type: [Number,String],
				default: 0
			}
		},
		data() {
			return {
				isRead: false,
				payType: 'wx', // 支付类型wx=微信,zfb=支付宝,yhk=银行卡
				loading: false,
				code:'',
				codeTxt:'获取验证码',
				sending:true,
				second:60,
				disabled:false,
				bankMessage:{},
			};
		},
		methods: {
			timeDown(){
				let result = setInterval( ()=>{
					--this.second;
					this.codeTxt = this.second + 'S'
					if(this.second < 0) {
						clearInterval(result);
						this.sending = true;
						this.disabled = false;
						this.second = 60;
						this.codeTxt = '获取验证码'
					} 
				}, 1000);
			},
			getCode () {
				if (!uni.getStorageSync('bankMessage')) return uni.showToast({title:'请选择银行卡',icon:'none'})
				if (!this.sending) return
				this.$http.post(this.$api.banck_code,{
					id:uni.getStorageSync('bankMessage').id,
					money:this.totalMoney
				}).then(res=>{
					this.sending = false;
					this.disabled = true;
					if (res.code == 1) {
						this.timeDown();
					}
					uni.showToast({
						title: res.msg,
						icon:'none'
					});
				})
			},
			//去绑定银行卡
			bindBank () {
				this.$refs.popup.close()
				uni.navigateTo({url:'/pages/mine/bankCard?type=1'})
			},
			open() {
				this.$refs.popup.open()
				this.loading = false
				this.bankMessage = uni.getStorageSync('bankMessage')
			},
			close() {
				this.$refs.popup.close()
			},
			confirm() {
				if(!this.isRead) return uni.showToast({
					title: '请阅读协议',
					icon: 'none'
				})
				this.close()
				this.loading = false
				this.$refs.popup1.open()
			},
			// 关闭后生成待支付订单
			closePop() {
				this.$refs.popup1.close()
				this.$emit('closePay')
			},
			// 余额支付直接确认扣款不需要密码其他支付跳转
			confirm2() {
				if (this.payType == 'yhk') {
					if (!this.code) return uni.showToast({title:'请输入验证码',icon:'none'})
				}
				this.loading = true
				this.$refs.popup1.close()
				let payType = ''
				if(this.payType == 'wx') {
					// #ifdef MP-WEIXIN
					payType = this.payType
					// #endif
					// #ifdef APP-PLUS
					payType = 'wxapp'
					// #endif
				} else {
					payType = this.payType
				}
				this.$emit('confirm', {payType:payType,code:this.code})
			}
		}
	}
</script>

<style lang="scss">
.pay_code {
	display: flex;
	margin-top: 20rpx;
	align-items: center;
	justify-content: center;
	text {
		color: #FC3B26;
		font-size: 26rpx;
		width: 130rpx;
		text-align: center;
	}
}
</style>
